<template>
    <div class="container">
        <button @click="closeCamera" class="btn">关闭摄像头222</button>
        <div id="reader"></div>
    </div>
</template>
<script setup>
/* eslint-disable */
import { useRouter } from "vue-router";
import { Html5Qrcode } from "html5-qrcode";
import { onMounted, ref } from "vue";
import { routeQuery } from "@/hook/routerHandle.js";
import { useIndexStore } from "@/stores/indexStore";
import { OpenChildrenPage } from "@/hook/routerHandle";

import { showDialog, showToast } from 'vant';
import { useI18n } from "vue-i18n";
const { t } = useI18n();


const useStore = useIndexStore();
const router = useRouter();
// const emits = defineEmits(['sendCode']);
// const sendEvent = (qrcode) => {
//     emits('acceptCode', qrcode)
// }
let { flag } = routeQuery();
console.log("flag:", flag);
let html5QrCode = null;
// useStore.acceptQrcode = 888;
onMounted(() => {
    html5QrCode = new Html5Qrcode("reader");
});


const closeCamera = () => {
    closeScan();
    router.back();
}
if (flag) {
    console.log("1234455");
    Html5Qrcode.getCameras()
        .then((devices) => {
            /**
             * devices would be an array of objects of type:
             * { id: "id", label: "label" }
             */
            if (devices && devices.length) {
                var cameraId = "";
                if (devices.length == 1) {
                    cameraId = devices[0].id;
                }
                if (devices.length == 2) {
                    cameraId = devices[1].id;
                }
                if (cameraId) {
                    console.log("获取摄像头成功11");
                    console.log(cameraId);
                    startScan(cameraId);
                }

                // .. use this to start scanning.
            } else {
                startWithoutCameraId();

            }
        })
        .catch((err) => {
            // handle err
            showToast(t("Qrcode.message"));
            console.log("没有获取到摄像头设备...");
        });
}

const startScan = (cameraId) => {

    html5QrCode
        .start(
            cameraId,
            {
                fps: 10, // Optional, frame per seconds for qr code scanning
                qrbox: { width: 280, height: 400 }, // Optional, if you want bounded box UI
            },
            (decodedText, decodedResult) => {
                // do something when code is read
                let result = null;
                console.log("result", decodedText);
                // const regex = /\/\/(.+)/;
                // result = decodedText.match(regex)[1];
                // useStore.acceptQrcode = result;
                result = decodedText;
                useStore.acceptQrcode = result;
                if (result) {
                    console.log(result);
                    console.log("%%99");
                    closeScan();
                    router.back();

                    // OpenChildrenPage('/StorePosting');
                    // router.replace('/StorePosting');

                }
            },
            (errorMessage) => {
                // showToast('扫码失败');
                // parse error, ignore it.
                // console.log("errorMesage:", errorMessage);
            }
        )
        .catch((err) => {
            // Start failed, handle it.
            console.log("未能获取摄像头");
        });
};

const closeScan = () => {
    html5QrCode
        .stop()
        .then((ignore) => {
            // QR Code scanning is stopped.
            showToast(t("Qrcode.tip3"));

        })
        .catch((err) => {
            // Stop failed, handle it.
        });

};

function startWithoutCameraId() {
    //environment 表示后置摄像头  换成user则表示前置摄像头
    html5QrCode.start(
        { facingMode: "user" } || {
            facingMode: { exact: "user" },
        },
        {
            fps: 10, // Optional, frame per seconds for qr code scanning
            qrbox: { width: 280, height: 400 }, // Optional, if you want bounded box UI
        },
        (decodedText, decodedResult) => {
            // do something when code is read
        },
        (errorMessage) => {
            // parse error, ignore it.
        }
    );
}
</script>


<style lang="css" scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #999;
}

button {
    display: block;
    width: 80vw;
    height: 40rem;
    line-height: 40rem;
    color: #fff;
    text-align: center;
    margin-bottom: 20rem;
    border-radius: 4rem;
    border: none;
    background-color: #26a2ff;
    cursor: pointer;
}

#upload-input {
    opacity: 0;
    filter: alpha(opacity=0);
    display: inline-block;
    width: 100%;
    height: 100%;
}

.upload-text {
    position: relative;
    bottom: 40rem;
    user-select: none;
}

#reader {
    width: 100vw;
    height: 50vh;
}

.btn {
    position: absolute;
    bottom: -10rem;
    z-index: 999;
    font-size: 18rem;
}
</style>
